<template>
  <footer :class="{ hidden: isScrolling || scrollTop < 50 }" class="footer">
    <slot>© 2025 Your Name or Company</slot>
  </footer>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const isScrolling = ref(false)
const scrollTop = ref(0)
let timeoutId: number

const handleScroll = () => {
  scrollTop.value = window.scrollY || window.pageYOffset
  if (scrollTop.value < 50) {
    // 靠近顶部，隐藏footer
    isScrolling.value = true
    clearTimeout(timeoutId)
    return
  }
  // 非顶部，滚动时显示隐藏逻辑
  isScrolling.value = true
  clearTimeout(timeoutId)
  timeoutId = window.setTimeout(() => {
    isScrolling.value = false
  }, 300)
}

onMounted(() => window.addEventListener('scroll', handleScroll))
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  clearTimeout(timeoutId)
})
</script>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  line-height: 48px;
  transition: transform 0.3s ease;
  z-index: 100;
}

.footer.hidden {
  transform: translateY(100%);
}
</style>
